import { defineStore } from 'pinia';
import { store } from '@/store';

const darkModeKey = '__dark_mode__';
const isDarkMode = () => {
  const darkMode = window.localStorage.getItem(darkModeKey);
  if (darkMode) {
    return darkMode === 'true';
  }
  return window.matchMedia('(prefers-color-scheme: dark)').matches;
};

export const useDarkModeStore = defineStore({
  id: 'dark-mode',
  state: () => ({
    darkMode: isDarkMode()
  }),
  actions: {
    toggleDarkMode() {
      this.darkMode = !this.darkMode;
      if (this.darkMode) {
        document.documentElement.classList.add('dark');
        window.localStorage.setItem(darkModeKey, 'true');
      } else {
        document.documentElement.classList.remove('dark');
        window.localStorage.setItem(darkModeKey, 'false');
      }
    }
  }
});

export function useDarkModeStoreHook() {
  return useDarkModeStore(store);
}
